<template>
	<view>
		<button style="margin: 20px;" type="primary" @click="login()">登录</button>
		<button style="margin: 20px;" type="primary" @click="wxLogin()">微信登录</button>

		<button style="margin: 20px;" type="primary" @click="dyLogin()">抖音登录</button>
		<button style="margin: 20px;" type="primary" @click="getUser()">获取用户列表</button>
		<view>
			<view class="uni-container">
				<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
					@selection-change="selectionChange">
					<uni-tr>
						<uni-th width="150" align="center">名称</uni-th>
						<uni-th width="150" align="center">昵称</uni-th>
						<uni-th align="center">手机号</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td>{{ item.login_name }}</uni-td>
						<uni-td>
							<view class="name">{{ item.nick_name }}</view>
						</uni-td>
						<uni-td align="center">{{ item.mobile }}</uni-td>
						<uni-td>
							<view class="uni-group">
								<button class="uni-button" size="mini" type="primary">修改</button>
								<button class="uni-button" size="mini" type="warn">删除</button>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box">
					<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
						@change="change" />
				</view>
			</view>
		</view>
	</view>
	<uni-popup ref="popup" type="bottom" backgroundColor="#fff">
		<view class="login">
			<text>获取您的昵称、头像</text>
			<button open-type="chooseAvatar" @bindchooseavatar="avater"></button>
			<uni-forms :modelValue="formData">
				<uni-forms-item required label="头像" name="name">
					<button type="primary" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain="true"
						style="padding: 0; width: 40px;height: 40px;border-radius: 20rpx;border: none;">
						<image :src="formData.avatar" style="width: 100%;height: 100%;"></image>
					</button>
				</uni-forms-item>
				<uni-forms-item required label="昵称" name="name" ;>
					<input type="nickname" style="font-size: 28rpx;" placeholder="请输入昵称" v-model="formData.nickname"
						@blur="getNickname" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="Submit()">保存</button>
		</view>
	</uni-popup>
	<uni-popup ref="loginPopup" type="top" backgroundColor="#fff">
		<uni-popup-message type="success" message="登陆成功!" :duration="200"></uni-popup-message>
	</uni-popup>
	<!-- 手机号 -->
	<uni-popup ref="phonePopup" type="bottom" backgroundColor="#fff">
		<view class="phone">
			<text>新用户需要手机号授权！</text>
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">唤起授权手机号</button>
		</view>
	</uni-popup>
</template>
<script>
	import {
		userInfo
	} from '@/stores/userInfo.js';
	import {
		getGoodsList,
		getUsersList,
		login,
		infoUpdate,
		mobile,
	} from '@/api/test.js'
	export default {
		data() {
			return {
				searchVal: '',
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				formData: {
					nickname: '',
					avatar: '../../static/logo.png',
				},
			};
		},
		methods: {
			getPhoneNumber(e) {
				console.log(e)
				let that = this;
				uni.getProvider({
					service: 'oauth',
					success: function(oauth) {
						//#ifdef MP-WEIXIN
						mobile({
							iv: e.detail.iv,
							appid: 'wx2d0afc7e102fbc39',
							provider: oauth.provider[0],
							encryptedData: e.detail.encryptedData,
						}).then(res => {
							that.$refs.phonePopup.close();
							that.$refs.popup.open('bottom')
							that.$refs.loginPopup.open('top')
						})
						//#endif
						//#ifdef MP-TOUTIAO
						mobile({
							iv: e.detail.iv,
							appid: 'ttebc79d7a74f9bbc201',
							provider: oauth.provider[0],
							encryptedData: e.detail.encryptedData,
						}).then(res => {
							that.$refs.phonePopup.close();
							that.$refs.popup.open('bottom')
							that.$refs.loginPopup.open('top')
						})
						//#endif
					}
				})

			},
			// 抖音登录
			dyLogin() {
				const info = userInfo();
				let that = this;
				// uni.getProvider({
				// 	service: 'oauth',
				// 	success: function(res) {
				// 		uni.getUserProfile({
				// 			desc: "登录",
				// 			success: function(infoRes) {
				// 				console.log(infoRes);
				// 			},
				// 			fail: function(res) {
				// 				console.log(res)
				// 			}
				// 		})
				// 	}
				// });
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						uni.getProvider({
							service: 'oauth',
							success: function(oauth) {
								login({
									provider: oauth.provider[0],
									code: loginRes.code,
									appid: 'ttebc79d7a74f9bbc201'
								}).then(res => {
									uni.getUserInfo({
										provider: oauth.provider[0],
										success: function(infoRes) {
											console.log(infoRes)
											that.formData.avatar = infoRes
												.userInfo.avatarUrl;
											that.formData.nickname =
												infoRes.userInfo.nickName;
											if (res.new_guest) {
												that.$refs.phonePopup.open(
													'bottom')
											} else {
												that.$refs.popup.open('bottom')
												that.$refs.loginPopup.open(
													'top')
											}
										}
									})
									info.setToken(res.token);
								})

							}
						});
					}
				});
			},
			// 保存用户信息
			Submit() {
				let that = this;
				infoUpdate({
					...this.formData
				}).then(() => {
					that.$refs.popup.close()
					that.$refs.loginPopup.close()
				})
			},
			getNickname(name) {
				this.formData.nickname = name.detail.value;
			},
			onChooseAvatar(avater) {
				console.log(avater.detail.avatarUrl)
				this.formData.avatar = avater.detail.avatarUrl;
			},
			// 大熊座原生登录
			login() {
				const info = userInfo();
				getGoodsList({
					username: 'ry',
					password: 'a123456'
				}).then(res => {
					info.setInfo(res.userinfo);
					info.setToken(res.token);
				})
			},
			// 微信登陆
			wxLogin() {
				//#ifdef MP-WEIXIN
				const info = userInfo();
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						uni.getProvider({
							service: 'oauth',
							success: function(res) {
								login({
									provider: res.provider[0],
									code: loginRes.code,
									appid: 'wx2d0afc7e102fbc39'
								}).then(res => {
									info.setToken(res.token);
									if (res.new_guest) {
										that.$refs.phonePopup.open(
											'bottom')
									} else {
										that.$refs.popup.open('bottom')
										that.$refs.loginPopup.open('top')
									}
								})
							}
						});
					}
				});
				//#endif
				//#ifdef MP-ALIPAY
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res.provider)
						if (~res.provider.indexOf('toutiao')) {
							uni.login({
								provider: 'toutiao',
								success: function(loginRes) {
									console.log(JSON.stringify(loginRes));
								}
							});
						}
					}
				});
				//#endif
			},
			getUser() {
				getUsersList().then(res => {
					console.log(res)
					this.tableData.push(...res.list)
				})
			}
		},
		created() {}
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-forms-item__content) {
		padding: 0;
		flex: none;
		display: flex;
		align-items: center;
	}

	.login {
		padding: 20px;
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

		text {
			display: block;
			margin-bottom: 20px;
		}

		button {
			width: 35%;
			font-size: 15px;
		}

		image {
			width: 40px;
			height: 40px;
		}
	}

	.phone {
		padding: 20px;

		text {
			font-size: 16px;
			display: block;
			margin-bottom: 20px;
		}
	}
</style>
